<template>
  <div class="container">
    <navbar title="收益报表" theme="light"></navbar>
    <list
        class="order-list-container">
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div class="box" style="margin-top: 12;">
          <div class="box-panel">
            <div class="tr">
              <div class="td">
                <div class="amount-value">
                  <text class="amount-value-main">{{decimalPart(earningData.money, 0)}}</text>
                  <text class="amount-value-point">.{{decimalPart(earningData.money, 1)}}</text>
                </div>
                <text class="amount-title">账户余额</text>
              </div>
              <div class="td">
                <div class="amount-value">
                  <text class="amount-value-main">{{decimalPart(earningData.obtainedMoney, 0)}}</text>
                  <text class="amount-value-point">.{{decimalPart(earningData.obtainedMoney, 1)}}</text>
                </div>
                <text class="amount-title">累积收益</text>
              </div>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box-nav">
            <div class="box-nav-item" @click="day = 'today'">
              <text :class="['box-nav-title', day === 'today' && 'box-nav-title-active']">今日预估</text>
              <div class="amount-value" style="margin-top: 5;">
                <text class="amount-value-main">{{decimalPart(earningData.todayEstimateCommissionFee + earningData.todayEstimateRewardFee, 0)}}</text>
                <text class="amount-value-point">.{{decimalPart(earningData.todayEstimateCommissionFee + earningData.todayEstimateRewardFee, 1)}}</text>
              </div>
            </div>
            <div class="box-nav-item" @click="day = 'yesterday'">
              <text :class="['box-nav-title', day === 'yesterday' && 'box-nav-title-active']" >昨日预估</text>
              <div class="amount-value" style="margin-top: 5;">
                <text class="amount-value-main">{{decimalPart(earningData.yesterdayEstimateCommissionFee + earningData.yesterdayEstimateRewardFee, 0)}}</text>
                <text class="amount-value-point">.{{decimalPart(earningData.yesterdayEstimateCommissionFee + earningData.yesterdayEstimateRewardFee, 1)}}</text>
              </div>
            </div>
          </div>
          <div class="box-panel" v-if="day === 'today'">
            <div class="tr" v-for="list in earningData.allotTypeRows">
              <template v-for="allotType in list">
                <div class="td" v-if="allotType !== 'orderNum'" v-bind:key="allotType">
                  <div class="amount-value">
                    <text class="amount-value-main">{{decimalPart(earningData['today' + allotType.capitalizeName + 'EstimateCommissionFee'] + earningData['today' + allotType.capitalizeName + 'EstimateRewardFee'], 0)}}</text>
                    <text class="amount-value-point">.{{decimalPart(earningData['today' + allotType.capitalizeName + 'EstimateCommissionFee'] + earningData['today' + allotType.capitalizeName + 'EstimateRewardFee'], 1)}}</text>
                  </div>
                  <text class="amount-title">{{allotType.title}}</text>
                </div>
                <div class="td" v-if="allotType === 'orderNum'">
                  <div class="amount-value">
                    <text class="amount-value-main">{{earningData.todayOrderNum || 0}}</text>
                  </div>
                  <text class="amount-title">有效订单</text>
                </div>
              </template>
            </div>
          </div>
          <div class="box-panel" v-if="day === 'yesterday'">
            <div class="tr" v-for="list in earningData.allotTypeRows">
              <template v-for="allotType in list" >
                <div class="td" v-if="allotType !== 'orderNum'" v-bind:key="allotType">
                  <div class="amount-value">
                    <text class="amount-value-main">{{decimalPart(earningData['yesterday' + allotType.capitalizeName + 'EstimateCommissionFee'] + earningData['yesterday' + allotType.capitalizeName + 'EstimateRewardFee'], 0)}}</text>
                    <text class="amount-value-point">.{{decimalPart(earningData['yesterday' + allotType.capitalizeName + 'EstimateCommissionFee']  + earningData['yesterday' + allotType.capitalizeName + 'EstimateRewardFee'], 1)}}</text>
                  </div>
                  <text class="amount-title">{{allotType.title}}</text>
                </div>
                <div class="td" v-if="allotType === 'orderNum'" v-bind:key="allotType">
                  <div class="amount-value">
                    <text class="amount-value-main">{{earningData.yesterdayOrderNum || 0}}</text>
                  </div>
                  <text class="amount-title">有效订单</text>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="box">
          <div class="box-nav">
            <div class="box-nav-item" @click="month = 'currentMonth' ">
              <text :class="['box-nav-title', month === 'currentMonth'  && 'box-nav-title-active']">本月预估</text>
              <div class="amount-value" style="margin-top: 5;">
                <text class="amount-value-main">{{decimalPart(earningData.monthEstimateCommissionFee + earningData.monthEstimateRewardFee, 0)}}</text>
                <text class="amount-value-point">.{{decimalPart(earningData.monthEstimateCommissionFee + earningData.monthEstimateRewardFee, 1)}}</text>
              </div>
            </div>
            <div class="box-nav-item" @click="month = 'lastMonth'">
              <text :class="['box-nav-title', month === 'lastMonth' && 'box-nav-title-active']" >上月预估</text>
              <div class="amount-value" style="margin-top: 5;">
                <text class="amount-value-main">{{decimalPart(earningData.lastMonthEstimateCommissionFee + earningData.lastMonthEstimateRewardFee, 0)}}</text>
                <text class="amount-value-point">.{{decimalPart(earningData.lastMonthEstimateCommissionFee + earningData.lastMonthEstimateRewardFee, 1)}}</text>
              </div>
            </div>
          </div>
          <div class="box-panel" v-if="month === 'currentMonth' ">
            <div class="tr"  v-for="(list, idx) in earningData.allotTypeRows">
              <template v-for="allotType in list" >
                <div class="td" v-bind:key="allotType" v-if="allotType !== 'orderNum'">
                  <div class="amount-value">
                    <text class="amount-value-main">{{decimalPart(earningData['month'  + allotType.capitalizeName + 'EstimateCommissionFee'] + earningData['month'  + allotType.capitalizeName + 'EstimateRewardFee'], 0)}}</text>
                    <text class="amount-value-point">.{{decimalPart(earningData['month'  + allotType.capitalizeName + 'EstimateCommissionFee'] + earningData['month'  + allotType.capitalizeName + 'EstimateRewardFee'], 1)}}</text>
                  </div>
                  <text class="amount-title">{{allotType.title}}</text>
                </div>
                <div class="td" v-if="allotType === 'orderNum'" v-bind:key="allotType + 'orderNum'">
                  <div class="amount-value">
                    <text class="amount-value-main">{{earningData.monthOrderNum || 0}}</text>
                  </div>
                  <text class="amount-title">有效订单</text>
                </div>
              </template>
            </div>
          </div>
          <div class="box-panel" v-if="month === 'lastMonth'">
            <div class="tr"  v-for="list in earningData.allotTypeRows" >
              <template v-for="allotType in list" >
                <div class="td" v-bind:key="allotType" v-if="allotType !== 'orderNum'">
                  <div class="amount-value">
                    <text class="amount-value-main">{{decimalPart(earningData['lastMonth'  + allotType.capitalizeName + 'EstimateCommissionFee']
                      + earningData['lastMonth'  + allotType.capitalizeName + 'EstimateRewardFee'], 0)}}</text>
                    <text class="amount-value-point">.{{decimalPart(earningData['lastMonth'  + allotType.capitalizeName + 'EstimateCommissionFee']
                      + earningData['lastMonth'  + allotType.capitalizeName + 'EstimateRewardFee'], 1)}}</text>
                  </div>
                  <text class="amount-title">{{allotType.title}}</text>
                </div>
                <div class="td" v-if="allotType === 'orderNum'" v-bind:key="allotType + 'orderNum'">
                  <div class="amount-value">
                    <text class="amount-value-main">{{earningData.lastMonthOrderNum || 0}}</text>
                  </div>
                  <text class="amount-title">有效订单</text>
                </div>
              </template>
            </div>
          </div>
        </div>
        <div class="box" v-if="false">
          <text class="box-title">结算收入</text>
          <div class="box-panel">
            <div class="tr">
              <div class="td">
                <div class="amount-value">
                  <text class="amount-value-main">{{decimalPart(earningData.monthSettledFee, 0)}}</text>
                  <text class="amount-value-point">.{{decimalPart(earningData.monthSettledFee, 1)}}</text>
                </div>
                <text class="amount-title">本月结算</text>
              </div>
              <div class="td">
                <div class="amount-value">
                  <text class="amount-value-main">{{decimalPart(earningData.lastMonthSettledFee, 0)}}</text>
                  <text class="amount-value-point">.{{decimalPart(earningData.lastMonthSettledFee, 1)}}</text>
                </div>
                <text class="amount-title">上月结算</text>
              </div>
            </div>
          </div>
        </div>
      </cell>
    </list>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/box";
  .container{
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .tr {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .td {
    flex: 1;
    @include border-right(1, solid, #ddd);
    align-items: center;
    justify-content: center;
    margin: 20 0;
  }

  .amount-value {
    flex-direction: row;
    align-items: flex-end;
    height: 40px;
    &-title {
      font-size: 26px;
      color: $color-muted;
    }
    &-main {
      font-size: 40px;
      color: $color-warning;
    }
    &-point {
      font-size: 28px;
      color: $color-warning;
      padding-bottom: 3px;
    }
    margin-bottom: 12px;
  }
  .amount-title {
    font-size: 24px;
    color: $color;
  }

</style>
<script>

let api = require('./include/api')
let Deferred = require('Deferred')
let grouping = require('./include/grouping')
require('./include/page-xdom')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      earningData: {},
      day: 'today',
      month: 'currentMonth',
      grouping: grouping
    }
  },
  created () {
    Deferred.when(this.loadData()).always(() => {

    })
  },
  methods: {
    loadData () {
      return api.page.earning.data().done(rs => {
        let data = rs.data
        this.earningData = data
        this.earningData.allotTypeRows = grouping(this.earningData.allotTypeList.concat(['orderNum']), 3)
      })
    },
    toggleDay () {
      this.day = this.day === 'today' ? 'yesterday' : 'today'
    },
    decimalPart (val, part) {
      val = val || 0
      let segs = val.toFixed(2).split('.')
      return parseInt(segs[part])
    },
    onXRefresh (event) {
      this.onRefresh(event, Deferred.when(this.loadData()))
    }
  }
}
</script>
